<template>
  <div class="mod-config">
    <el-form inline label-width="80px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="省">
            <el-select filterable default-first-option clearable v-model="dataForm.provinceCode" placeholder="请选择" @change="getCitysHandle">
              <el-option v-for="item in provinces" :key="item.id" :label="item.regionName" :value="item.id">
                <span style="float: left">{{ item.regionName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="市">
            <el-select filterable default-first-option clearable v-model="dataForm.cityCode" placeholder="请选择" @change="getAreasHandle">
              <el-option v-for="item in citys" :key="item.id" :label="item.regionName" :value="item.id">
                <span style="float: left">{{ item.regionName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="区/县">
            <el-select filterable default-first-option clearable v-model="dataForm.areaCode" placeholder="请选择">
              <el-option v-for="item in areas" :key="item.id" :label="item.regionName" :value="item.id">
                <span style="float: left">{{ item.regionName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="学校类型">
            <el-select v-model="dataForm.schoolType" @change="schoolTypeChange" clearable>
              <el-option v-for="item in schoolTypeOption" :value="item.value" :label="item.label" :key="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="学校名称">
            <el-select v-model="dataForm.schoolId" @change="schoolChange" filterable clearable>
              <el-option v-for="item in schoolOption" :value="item.id" :label="item.schoolName" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="年级">
            <el-select v-model="dataForm.gradeId" @change="getClassOption" filterable clearable>
              <el-option v-for="item in gradeOption" :value="item.id" :label="item.gradeName" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="班级">
            <el-select filterable default-first-option clearable v-model="dataForm.classId">
              <el-option v-for="item in classOptions" :value="item.id" :label="item.className" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="检测日期">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="dataForm.checkDateStart" value-format="yyyy-MM-dd"
                style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2" style="text-align: center;">至</el-col>
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="dataForm.checkDateEnd" value-format="yyyy-MM-dd"
                style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学年">
            <el-col :span="11">
              <el-date-picker type="year" v-model="dataForm.fromYear" value-format="yyyy" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2" style="text-align: center;">至</el-col>
            <el-col :span="11">
              <el-date-picker type="year" v-model="dataForm.toYear" value-format="yyyy" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px;">
        <el-form-item label-width="5px">
          <el-button type="primary" @click="searchHandle">查 询</el-button>
        </el-form-item>
      </el-row>
    </el-form>

    <count-result v-if="resultVisible" ref="resultDialog"></count-result>
  </div>
</template>

<script>
  import { mapGetters } from "Vuex"
  import { remote } from '@/api/admin/dict'
  import { filterParams, getDateFormat } from "@/util/tools"
  import { getListByParentId } from '@/api/admin/region'
  import {
    getSchoolOptions,
    getSchoolListBySchoolType,
    getClassOptions
  } from '@/api/pvm/school'
  import { getGradeBySchoolId } from '@/api/pvm/grade'
  import { getCurrentYear } from '@/api/pvm/filingRate'
  import CountResult from './CountResult'

  export default {
    data() {
      return {
        resultVisible: false,
        dataForm: {
          provinceCode: '',
          cityCode: '',
          areaCode: '',
          schoolType: '',
          schoolId: '',
          gradeId: '',
          classId: '',
          checkDateStart: '',
          checkDateEnd: '',
          fromYear: '',
          toYear: ''
        },
        provinces: [],
        citys: [],
        areas: [],
        schoolTypeOption: [],
        schoolOption: [],
        gradeOption: [],
        classOptions: []
      };
    },
    computed: {
      ...mapGetters(["userInfo", "bizData"])
    },
    components: {
      CountResult
    },
    created() {
      remote('school_type').then(response => {
        this.schoolTypeOption = response.data.data
      })
      this.getProvinces()
      this.getCurrentYear()
    },
    methods: {
      getCurrentYear(){
        getCurrentYear().then(response => {
          if(response.data.code == '0'){
            let resultData = response.data.data
            let yearArr = resultData.split(',')
            this.$set(this.dataForm,'fromYear',yearArr[0])
            this.$set(this.dataForm,'toYear',yearArr[1])
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      searchHandle() {
        this.resultVisible = true
        this.dataForm.status = 0
        let params = JSON.parse(JSON.stringify(this.dataForm))
        this.$nextTick(() => {
          this.$refs.resultDialog.init(params)
        })
      },
      // 生成省级列表
      getProvinces() {
        var parentId = '86';
        getListByParentId(parentId).then(response => {
          if(response.data.code == '0'){
            this.provinces = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        }).catch(() => {
          alert("省级地址出错了，请联系管理员a ")
        });
      },
      // 获取市级列表
      getCitysHandle(id) {
        this.citys = []
        this.areas = []
        this.$set(this.dataForm, 'cityCode', '')
        this.$set(this.dataForm, 'areaCode', '')
        if (id) {
          getListByParentId(id).then(response => {
            if(response.data.code == '0'){
              this.citys = response.data.data
            }else{
              this.$message.error(response.data.msg)
            }
          }).catch(() => {
            alert("省级地址出错了，请联系管理员a ")
          });
        }
      },
      // 获取县级列表
      getAreasHandle(id) {
        this.areas = []
        this.$set(this.dataForm, 'areaCode', '')
        if (id) {
          getListByParentId(id).then(response => {
            if(response.data.code == '0'){
              this.areas = response.data.data
            }else{
              this.$message.error(response.data.msg)
            }
          }).catch(() => {
            alert("省级地址出错了，请联系管理员a ")
          });
        }
      },
      schoolTypeChange() {
        this.schoolOption = [],
          this.gradeOption = [],
          this.classOptions = [],
          this.$set(this.dataForm, 'schoolId', '')
        this.$set(this.dataForm, 'gradeId', '')
        this.$set(this.dataForm, 'classId', '')
        if (this.dataForm.schoolType) {
          getSchoolListBySchoolType(this.dataForm.schoolType).then(response => {
            if(response.data.code == '0'){
              this.schoolOption = response.data.data
            }else{
              this.$message.error(response.data.msg)
            }
          })
        } else {
          getSchoolOptions(this.dataForm.schoolType).then(response => {
            if(response.data.code == '0'){
              this.schoolOption = response.data.data
            }else{
              this.$message.error(response.data.msg)
            }
          })
        }
      },
      schoolChange(id) {
        this.gradeOption = [],
        this.classOptions = [],
        this.$set(this.dataForm, 'gradeId', '')
        this.$set(this.dataForm, 'classId', '')
        if (id) {
          getGradeBySchoolId(id).then(response => {
            if(response.data.code == '0'){
              this.gradeOption = response.data.data
            }else{
              this.$message.error(response.data.msg)
            }
          })
        }
      },
      // 获取班级列表
      getClassOption(gradeId) {
        this.classOptions = []
        this.$set(this.dataForm, 'classId', '')
        getClassOptions(this.dataForm.schoolId, gradeId).then(response => {
          if(response.data.code == '0'){
            this.classOptions = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
          
        })
      },
    }
  };
</script>

<style lang="scss" scoped>
  .row-bg {
    background-color: #cadee8;
    // padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    margin-bottom: 2px;
  }
</style>
